<template>
    <div class="body">
        
        <div class="my">
            <van-image round width="4rem" height="4rem" fit="cover" :src="$store.getters.getUser.avatarUrl" />
            <div class="myname">
                <span>{{$store.getters.getUser.nickname}}</span>
                <div style="margin:2% 0"></div>
                <div class="stag">
                    <van-tag class="tag" color="#F4F4F4" size="large" text-color="#333" round type="primary">粉丝：{{$store.getters.getUser.followeds}}</van-tag>
                    <van-tag class="tag" color="#F4F4F4" size="large" text-color="#333" round type="primary">关注：{{$store.getters.getUser.follows}}</van-tag>
                </div>
            </div>
            <van-icon @click="logout" name="arrow" size="30" style="margin-right:1%;"/>
        </div>

        <!-- <div class="like">
            <van-image class="img" width="4rem" height="4rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            <div class="likename">
                <span>我喜欢的音乐</span>
                <div>
                    <span>------396首------</span>
                </div>
            </div>
            <van-icon style="margin-right:20px;" name="like-o" size="30"/>
        </div> -->

        <div>
            <van-tabs @change="changePage" v-model="active">
                <van-tab title-style="font-size:18px;" title="创建歌单"></van-tab>
                <van-tab title-style="font-size:18px;" title="收藏歌单"></van-tab>
                <van-tab title-style="font-size:18px;" title="歌单助手" disabled></van-tab>
            </van-tabs>
            <Bottom0 :playlist="myplaylist" v-show="showArr[0]" >创建歌单</Bottom0>
            <Bottom0 :playlist="showplaylist" v-show="showArr[1]" >收藏歌单</Bottom0>
            <Bottom2 v-show="showArr[2]" />
        </div>

    </div>
</template>

<script>
import Bottom0 from './bottom0'
import Bottom1 from './bottom1'
import Bottom2 from './bottom2'
import List from '@/api/index'
export default {
    data(){
        return{
            active:0,
            showArr:[true, false, false],
            myplaylist:[],
            showplaylist:[]
        }
    },
    components:{
        Bottom0,Bottom1,Bottom2
    },
    methods:{
    changePage(){
        for(let i=0; i<this.showArr.length; i++){
            this.showArr[i] = false;
        }
        this.showArr[this.active] = true;
    },
    logout(){
        this.$store.commit('setUser',null);
        this.$router.push('/');
    }
  },mounted(){
      let _this = this;
      List.getUserPlayList(this.$store.getters.getUser.id).then(function(res){
          //console.log('userplaylist',res)
          let playlist = res.data.playlist;
          for(let i=0; i<playlist.length; i++){
              if(playlist[i].subscribed){
                  _this.showplaylist.push(playlist[i]);
              }else{
                  _this.myplaylist.push(playlist[i]);
              }
          }

          //coverImgUrl
          //name
          //playCount

          console.log(_this.showplaylist);
          console.log(_this.myplaylist)
      })
  }
}
</script>

<style scoped>

.body{
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
}
.my{
    /* border: 1px solid #000; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5%;
    padding: 3% 5%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px 0.5px #33333333;
}
.myname{
    /* border: 1px solid #000; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    margin-right: 5%;
    margin-left: 5%;
}
.like{
    /* border: 1px solid #000; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px 0.5px #33333333;
}
.likename{
    /* border: 1px solid #000; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    margin-right: 20%;
}
.img{
    margin: 15px;
}
.box{
    background: #fff;
}
.stag{
    display: flex;
    flex-direction:row;
}
.tag{
    padding: 1px 8px;
    border: 1px solid #aca9a73b;
    color: #aca9a7;
    margin-right: 10px; 
    font-size: 13px;
    list-style: none;
    white-space: nowrap;
}
</style>